<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>客户名称:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span style="margin-right: 360px">{{cilentName}}</span>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>负责人:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="cilentUser" placeholder="负责人"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>负责人电话:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="cilentPhone" placeholder="负责人电话"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>办公地址:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span style="margin-right: 310px">{{cilentAddress}}</span>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>邮箱:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span style="margin-right: 320px">{{cilentEmail}}</span>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>经营范围:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="cilentScope" type="textarea" :rows="3" placeholder="经营范围"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <el-button type="success" @click="update">更改</el-button>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "updateCilent",
  data() {
    return {
      clientId: 0,
      cilentName: '',
      cilentUser: '',
      cilentPhone: '',
      cilentAddress: '',
      cilentEmail: '',
      cilentScope: ''
    }
  },
  methods: {
    init(id) {
      this.clientId = id;
      let params = {
        clientId: id
      }
      this.$axios.get('drp/cilent/findById', {params: params}).then(
          r => {
            console.log(r.data)
            this.cilentName = r.data.clientName
            this.cilentUser = r.data.clientHead
            this.cilentPhone = r.data.clientPhone
            this.cilentAddress = r.data.clientAddress
            this.cilentEmail=r.data.clientEmail
            this.cilentScope = r.data.clientScope
          }
      )
    },
    update() {
      let formData = new FormData()
      formData.append("clientId", this.clientId)
      formData.append("head", this.cilentUser)
      formData.append("phone", this.cilentPhone)
      formData.append("scope", this.cilentScope)
      this.$axios.post('drp/cilent/updateClientHeadAndPhoneAndScope', formData).then(
          r => {
            if (r.data == 'ok') {
              location.href = "/index"
            } else {
              this.$message.error("更改失败")
            }
          }
      )
    }
  }
}
</script>

<style scoped>

</style>